/**
  需求：实现一键复制文本内容，用于鼠标右键粘贴。
  
  思路：
    动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
    将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
    选中值 textarea 并复制
    将 body 中插入的 textarea 移除
    在第一次调用时绑定事件，在解绑时移除事件
 */
import { ObjectDirective } from 'vue';

const copy: ObjectDirective<any, string> = {
  created(el, binding) {
    const { value } = binding;
    if (typeof value !== 'string') {
      throw 'binding.value must be a string'
    }

    /* 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据,
    建议通过元素的 dataset 来进行。*/
    // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
    el.setAttribute('data-copy-content', value || el.textContent.trim() || 'undefined');

    el.handler = () => {
      if (!el.dataset.copyContent || el.dataset.copyContent === 'undefined') {
        // 值为空的时候，给出提示。可根据项目UI仔细设计
        process.env.NODE_ENV !== 'production' && console.warn('[directives of copy]: 未找到复制内容，请确定输入了v-copy的binding.value或者el.textContent?');
        return;
      }

      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = true
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.dataset.copyContent;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        // 可根据项目UI仔细设计
        console.log('复制成功')
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  updated(el, { value }) {
    el.setAttribute('data-copy-content', value);
  },
  beforeUnmount(el) {
    el.removeEventListener('click', el.handler);
    el.handler = null;
  }
}

export default copy;
